<template>
  <div class="mine-box admin-order-box order-box">
    <div class="user-box-title" :style="back">
     <adminuserinfo></adminuserinfo>
      <div class="m-moneybox">
        <div class="fleft choose-input-box">
          <span size="30" class="iconfont icon-sousuo"></span>
          <input maxlength="15" type="text" class="choose-input" v-model="orderID" placeholder="请输入订单号/手机号" />
        </div>
<!--        <div class="fright sx-text" @click="showchoosediv">筛选</div>-->
      </div>
    </div>

    <div class="use-box List">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list>
          <mu-list-item v-for="(item,index) in orderList" :key="index">
            <mu-list-item-content>
              <mu-list-item-title>
                <div class="order-title">
                  <span class="fleft">单号: {{item.ordernumber}}</span>
                  <span class="fright money" style="font-size: 20px">¥{{item.orderGold}}</span>
                  <div class="_clear"></div>
                </div>
                <div class="order-title">
                  <span class="fleft createtime">用户名:{{item.userName}}</span>
                  <span class="fright status">{{item.orderstate}}</span>

                  <div class="_clear"></div>
                </div>
                <div class="order-title">
                  <span class="fleft createtime">订单类型:{{item.orderType}}<span v-if="item.cardNo">(电卡订单)</span></span>
                  <div class="_clear"></div>
                </div>

                <div class="order-title">
                  <span class="fleft">实际时间: {{item.realHour}}小时</span>
                  <div class="_clear"></div>
                </div>
                <div class="order-title">
                  <span class="fleft">预计时间: {{item.hour}}小时</span>
                  <div class="_clear"></div>
                </div>
                <div class="order-title">
                  <span class="fleft">充电桩编号: {{item.parkId}}</span>
                  <div class="_clear"></div>
                </div>
                <div class="order-title">
                  <span class="fleft">端口号: {{item.portName}}</span>
                  <div class="_clear"></div>
                </div>
                <div class="order-title">
                  <span class="fleft">电量: {{item.consumePower}}kwh</span>
                  <div class="_clear"></div>
                </div>
              </mu-list-item-title>
              <mu-list-item-sub-title style="display:flex;justify-content: space-between">
                <div class="fleft order-timebox order-title">
                  <div class="time-title">开始时间</div>
                  <div class="time-des">{{item.starttime}}</div>
                </div>
                <div class="hour-box">
                  <span class="hour">{{item.hour}}h</span>
                </div>

                <div class="fright order-timebox order-title">
                  <div class="time-title">结束时间</div>
                  <div class="time-des">{{item.endtime}}</div>
                </div>
                <div class="_clear"></div>
              </mu-list-item-sub-title>
              <mu-list-item-sub-title style="display:flex;justify-content: space-between">
                <mu-button class="black-btn btn" @click="showrefunddiv(item)">退款</mu-button>
                <mu-button class="black-btn btn" @click="showchangeportdiv(item)">端口变更</mu-button>
              </mu-list-item-sub-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
        <div v-show="nolist" class="nolist">
          <span class="iconfont icon-charging"></span>
          <p>暂无订单记录</p>
        </div>
      </mu-load-more>
    </div>
    <choose ref="choose" v-on:chooseDate="shaixuan"></choose>
    <refund ref="refund"></refund>
    <changeport ref="changeport"></changeport>
  </div>
</template>

<script>
import changeport from "@/components/global/changeport";
import refund from "@/components/global/refund";
import choose from "@/components/global/choose";
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      orderID: "",
      nolist: true,
      num: 5,
      loaded_all: false,
      refreshing: false,
      loading: false,
      back: {
        background:
          "url(" + require("../../../assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      orderList: [],
      choosedata: {
        plot: "",
        startTime: "",
        endTime: "",
        parkid: "",
        state:''
      }
    };
  },
  components: {
    choose: choose,
    refund: refund,
    changeport: changeport,
  },
  watch: {
    orderID:function() {
      this.getList();
    },
    orderList: function(v) {
      if (v == "") {
        this.nolist = true;
      } else {
        this.nolist = false;
      }
    }
  },
  mounted() {
    if(this.$route.query.id){
      this.choosedata.parkid = this.$route.query.id
    }
    this.getList();
  },
  methods: {
    showchoosediv() {
      this.$refs.choose.Showchoosediv();
    },
    shaixuan: function(somedata) {
      this.choosedata.plot = somedata.xiaoquId,
        this.choosedata.startTime = somedata.stime,
        this.choosedata.endTime = somedata.etime,
        this.choosedata.plot = somedata.xiaoquId,
        this.choosedata.parki = somedata.parkid;
          this.choosedata.state = somedata.state;
        this.getList();
    },
    showrefunddiv(item){
      this.$refs.refund.Showrefunddiv(item);
    },
    showchangeportdiv(item){
      this.$refs.changeport.Showchangeportdiv(item);
    },
    getList() {
      this.$api
        .getOrderList({
          startTime: this.choosedata.startTime,
          endTime: this.choosedata.endTime,
          plot: this.choosedata.plot,
          parkid: this.choosedata.parkid,
          ordernumber:this.orderID,
          state:this.choosedata.state,
          pageNo: 1,
          pageSize: this.num
        })
        .then(res => {
          if (res.data != "") {

            if (res.data.message.code == 0) {
              this.orderList = res.data.data.records;

              this.nolist = false;
              if (res.data.data.pages == 1) {
                Toast("已加载全部数据");
                this.loaded_all = true;
              }
                this.refreshing = false;
            }
          }
        });
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.getList();
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 3;
        this.getList();
      }, 2000);
    }
  },


};
</script>

<style>
</style>
